#drf_data .neirong {
    width: 100%;
    height: 300px;
    margin-left: 90px;
    margin-top: 40px;
}

#drf_data .neirong .neirong-title {
    background: url(../images/drf-title9.webp) no-repeat;
    width: 100%;
    height: 43px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#drf_data .neirong .neirong-title a {
    display: block;
    position: absolute;
    right: 280px;
    color: #3d3d57;
}

#drf_data .neirong .neirong-title a:hover i {
    background: #514db7
}

#drf_data .neirong .neirong-title i {
    display: inline-block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    position: relative;
    top: 3px;
    left: 3px;
    background: #8584c3;
}

#drf_data .neirong .neirong-title i:before {
    content: '';
    width: 11px;
    height: 1px;
    position: absolute;
    margin: 0 auto;
    left: 5px;
    top: 10px;
    background: #fff
}

#drf_data .neirong .neirong-title i:after {
    background: #fff;
    content: '';
    width: 1px;
    height: 11px;
    position: absolute;
    margin: 0 auto;
    left: 10px;
    top: 5px;
}

#drf_data .neirong .tab_ctrl_wrap {
    overflow: hidden;
    margin-top: 25px;
}

#drf_data .neirong .tab_ctrl {
    float: left;
    width: 130px;
    margin-left: 7px;
    position: relative;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#drf_data .neirong .tab_ctrl.active{
    width: 385px;
}
#drf_data .neirong .tab_ctrl:first-child {
    margin-left: 0;
}

#drf_data .neirong .tab_ctrl .tab_card {
    background-image: url(../images/drf_title10.webp);
    background-repeat: no-repeat;
    width: 130px;
    height: 169px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#drf_data .neirong .tab_ctrl .tab_detail {
    opacity: 0;
    width: 0px;
    position: absolute;
    left: 130px;
    top: 0;
    height: 176px;
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: url(../images/drf_title11.webp) no-repeat;
    background-size: 100% 100%;
}
#drf_data .neirong .tab_ctrl .tab_detail.active{
    width: 279px;
    opacity: 1;
}
#drf_data .guide-list {
    width: 255px;
    height: 60px;
    padding: 58px 0;
    margin: 0 auto;
}

#drf_data .guide-list li {
    width: 82px;
    text-align: center;
    float: left;
    position: relative;
}

#drf_data .guide-list li:after {
    content: '';
    border-left: 1px dashed #d5d5ee;
    width: 1px;
    height: 55px;
    position: absolute;
    right: 0px;
    top: 0;
}

#drf_data .guide-list li:last-child:after {
    display: none;
}

#drf_data .guide-list li i {
    display: block;
    margin: 5px auto 4px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#drf_data .guide-list a {
    display: block;
    width: 100%;
    color: #5a5a5a;
    font-size: 14px;
    text-align: left;
}

#drf_data .guide-list a:hover {
    color: #b08752;
}

#drf_data .guide-list a:hover i {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#drf_data .guide-list-link li {
    height: 28px;
    line-height: 28px;
    position: relative;
}

#drf_data .guide-list-link li:after {
    content: '';
    border-left: 1px dashed #d5d5ee;
    width: 1px;
    height: 12px;
    position: absolute;
    right: 10px;
    top: 6px;
}

#drf_data .guide-list a {
    text-align: center;
}

#drf_data .guide-list-link a,
#drf_data .guide-list-link2 a,
#drf_data .guide-list-link3 a {
    text-align: left;
}

#drf_data .guide-list-link {
    width: 248px;
}

#drf_data .guide-list-link2 {
    height: 80px;
    padding: 10px 0;
}

#drf_data .guide-list-link3 {
    padding: 25px 0;
}

#drf_data .tab_ctrl_1 .guide-list li i {
    background-image: url(../images/drf-title12.webp);
}

#drf_data .tab_ctrl_1 .icon1 {
    background-position: 0 0
}

#drf_data .tab_ctrl_1 .icon1 {
    width: 34px;
    height: 31px;
}

#drf_data .tab_ctrl_1 .icon2 {
    background-position: -85px 0
}

#drf_data .tab_ctrl_1 .icon2 {
    background-position: -85px 0
}

#drf_data .tab_ctrl_1 .icon2 {
    width: 34px;
    height: 31px;
}

#drf_data .tab_ctrl_1 .icon3 {
    background-position: right 0
}

#drf_data .tab_ctrl_1 .icon3 {
    background-position: right 0
}

#drf_data .tab_ctrl_1 .icon3 {
    width: 31px;
    height: 31px;
}

#drf_data .tab_ctrl_2 .guide-list li i {
    background-image: url(../images/drf-icons2_1101cbf7.png);
}

#drf_data .tab_ctrl_2 .icon1 {
    background-position: 0 0;
}

#drf_data .tab_ctrl_2 .icon1 {
    background-position: 0 0;
}

#drf_data .tab_ctrl_2 .icon1 {
    width: 34px;
    height: 37px;
}

#drf_data .tab_ctrl_2 .icon2 {
    background-position: -72px 0;
}

#drf_data .tab_ctrl_2 .icon2 {
    background-position: -72px 0;
}

#drf_data .tab_ctrl_2 .icon2 {
    width: 51px;
    height: 37px;
}

#drf_data .tab_ctrl_2 .icon3 {
    background-position: right 0;
}

#drf_data .tab_ctrl_2 .icon3 {
    background-position: right 0;
}

#drf_data .tab_ctrl_2 .icon3 {
    width: 44px;
    height: 37px;
}

#drf_data .tab_ctrl_3 ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

#drf_data .tab_ctrl_3 ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

#drf_data .tab_ctrl_3 ul li::after {
    content: none;
}

#drf_data .tab_ctrl_3 ul li a {
    text-align: center;
    position: relative;
}

#drf_data .tab_ctrl_3 ul li a::after {
    content: '';
    border-left: 1px dashed #d5d5ee;
    width: 1px;
    height: 12px;
    position: absolute;
    right: 0;
    top: 6px;
}

#drf_data .tab_ctrl_3 ul li a:last-child::after {
    content: none;
}

#drf {
    .swiper-slide {
        min-height: 768px;
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .drf_content {
        width: 1100px;
        margin: 0 auto;
        position: relative;
        top: auto;
        overflow: unset;
    }

    #drf_data .drf_title {
        background: url(../images/drf-title.webp) no-repeat;
        width: 1133px;
        height: 171px;
        top: -20px;
    }

    .drf_wanfa {
        width: 836px;
        height: 280px;
        margin-left: 120px;

        .drf_list1 {
            .avatar {
                background: url(../images/drf-title4.webp) no-repeat center center
            }
        }

        .drf_list2 {
            .avatar {
                background: url(../images/drf-title5.webp) no-repeat center center
            }
        }

        .drf_list3 {
            .avatar {
                background: url(../images/drf-title6.webp) no-repeat center center
            }
        }

        .drf_list4 {
            .avatar {
                background: url(../images/drf-title7.webp) no-repeat center center
            }
        }

        .drf_list5 {
            .avatar {
                background: url(../images/drf-title8.webp) no-repeat center center
            }
        }

        >div {
            float: left;
            width: 255px;
            height: 129px;
            margin-right: 30px;
            margin-bottom: 15px;
        }

        >div:nth-of-type(3n+3) {
            margin-right: 0;
        }

        .drf_wanfa1 {
            position: relative;
            left: -25px;
            background: url(../images/drf-title1.webp) no-repeat;
        }

        .drf_list {
            position: relative;
            background: url(../images/drf-title2.webp) no-repeat;
            &:hover{
                .bar1::before{
                    top: 0;
                }
                .bar2::before{
                    left: 0;
                }
                .bar3::before{
                    top:0;
                }
                .bar4::before{
                    left: 0;
                }
                .bar5::before{
                    top: 0;
                }
            }
            .bar1{
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                height: 33px;
                background-color: transparent;
                overflow: hidden;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    // top: 0;
                    top: 33px;
                    width: 100%;
                    height: 100%;
                    background-color: #d0d3f7;
                    transition-property:all;
                    transition-duration: 0.2s;
                    transition-delay:0;
                }
                &.mouseout::before{
                    transition-delay: 1s;
                }
            }
            .bar2{
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 30px);
                height: 4px;
                background-color: transparent;
                overflow: hidden;
                &::before{
                    content: '';
                    position: absolute;
                    // left: 0;
                    left: -100%;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #d0d3f7;
                    transition-property:all;
                    transition-duration: 0.2s;
                    transition-delay:0.2s;
                }
                &.mouseout::before{
                    transition-delay: 0.8s;
                }
            }
            .bar3{
                position: absolute;
                right: 30px;
                top: 0;
                width: 4px;
                height: 100%;
                background-color: transparent;
                overflow: hidden;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: -100%;
                    width: 100%;
                    height: 100%;
                    background-color: #d0d3f7;
                    transition-property:all;
                    transition-duration: 0.2s;
                    transition-delay:0.4s;
                }
                &.mouseout::before{
                    transition-delay: 0.6s;
                }
            }
            .bar4{
                position: absolute;
                bottom: 0;
                left: 0;
                width: calc(100% - 30px);
                height: 4px;
                background-color: transparent;
                overflow: hidden;
                &::before{
                    content: '';
                    position: absolute;
                    left: 100%;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #d0d3f7;
                    transition-property:all;
                    transition-duration: 0.2s;
                    transition-delay:0.6s;
                }
                &.mouseout::before{
                    transition-delay: 0.4s;
                }
            }
            .bar5{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 4px;
                height: 33px;
                background-color: transparent;
                overflow: hidden;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 100%;
                    width: 100%;
                    height: 100%;
                    background-color: #d0d3f7;
                    transition-property:all;
                    transition-duration: 0.2s;
                    transition-delay:1s;
                }
                &.mouseout::before{
                    transition-delay: 0s;
                }
            }
            .avatar {
                width: 66px;
                height: 66px;
                position: absolute;
                right: 50px;
                top: 50%;
                margin-top: -33px;
                border: 1px dashed #8489b9;
                border-radius: 50%;

            }

            .drf_name {
                position: relative;
                text-align: left !important;
                z-index: 2;
                left: -30px;
                top: 40px;
                color: #3d3d57;
                font-size: 18px;
                line-height: 1.5;

                i {
                    background: url(../images/drf-title3.webp) no-repeat;
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    position: relative;
                    margin-left: 3px;
                    top: 2px;
                    font-style: italic;
                }
            }

            a {
                display: block;
                width: 255px;
                height: 129px;
                color: #666;
                text-decoration: none;
                position: relative;
                .drf_border {
                    overflow: hidden;
                    pointer-events: none;
                    position: absolute;
                    width: calc(100% - 30px);
                    height: calc(100% - 10px);
                    top: 4px;
                    left: 4px;
                    z-index: 1;
                    opacity: 1;


                    .drf_border_top {
                        overflow: hidden;
                        pointer-events: none;
                        position: absolute;
                        width: calc(100% - 30px);
                        height: calc(100% - 10px);
                        top: 4px;
                        left: 4px;
                        z-index: 1;
                        opacity: 1;
                    }

                    .drf_border_left {
                        left: 0;
                        background: none
                    }

                    .drf_border_left:before {
                        content: '';
                        width: 2px;
                        height: 0;
                        position: absolute;
                        left: 0;
                        bottom: 89px;
                        -webkit-transition-delay: 0s;
                        transition-delay: 0s;
                    }

                    .drf_border_left:after {
                        content: '';
                        width: 2px;
                        height: 30px;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        -webkit-transform: translate3d(0, 100%, 0);
                        transform: translate3d(0, 100%, 0);
                        -webkit-transition-delay: 0.5s;
                        transition-delay: 0.5s;
                    }

                    .drf_border_bottom {
                        bottom: 0;
                        -webkit-transform: translate3d(100%, 0, 0);
                        transform: translate3d(100%, 0, 0);
                        -webkit-transition-delay: 0.35s;
                        transition-delay: 0.35s;
                    }

                    .drf_border_right {
                        right: 0;
                        -webkit-transform: translate3d(0, -100%, 0);
                        transform: translate3d(0, -100%, 0);
                        -webkit-transition-delay: 0.2s;
                        transition-delay: 0.2s;

                    }



                    strong {
                        -webkit-transform: translateX(10px);
                        transform: translateX(10px);
                        display: block;
                        -webkit-transition: all 0.5s ease;
                        transition: all 0.5s ease;

                    }

                    p {
                        color: #888baf;
                        font-size: 14px;
                    }


                }
            }
        }
    }

    .drf_neirong {
        width: 830px;
        height: 300px;
        margin-left: 90px;
        margin-top: 40px;

        .drf_title2 {
            background: url(../images/drf-title9.webp) no-repeat;
            width: 706px;
            height: 43px;
            position: relative;

            a {
                display: block;
                position: absolute;
                width: 90px;
                height: 20px;
                right: -120px;
                top: 10px;
                color: #3d3d57;
            }

            i {
                background: #8584c3;
                display: inline-block;
                width: 21px;
                height: 21px;
                border-radius: 50%;
                position: relative;
                top: -25px;
                left: 58px;
                font-style: italic;
            }

            i::before {
                content: '';
                width: 11px;
                height: 1px;
                position: absolute;
                margin: 0 auto;
                left: 5px;
                top: 10px;
                background: #fff
            }

            i::after {
                content: '';
                width: 1px;
                height: 11px;
                position: absolute;
                margin: 0 auto;
                left: 10px;
                top: 5px;
                background: #fff
            }
        }

        .drf_wrap {
            overflow: hidden;
            margin-top: 25px;
        }

        .drf_ctrl {
            float: left;
            width: 130px;
            margin-left: 7px;
            position: relative;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;

            :first-child {
                margin-left: 0;
            }
        }

        #drf_data .drf_neirong .neirong-title a:hover i {
            background: #514db7
        }

    }

    #drf_data {
        .drf_person {
            background: url(../images/drf-title13.webp) no-repeat;
            width: 329px;
            height: 391px;
            position: absolute;
            right: -150px;
            top: 140px;
        }

        .drf_bbs {
            background: url(../images/drf-title14.webp) no-repeat;
            width: 172px;
            height: 287px;
            position: absolute;
            right: 17px;
            top: 520px;

            a {
                display: block;
                margin: 0 auto;
                position: relative;
                left: -2px;
            }

            .drf_md {
                background-image: url(../images/drf_title15.webp);
                background-position: 0 0;
                margin-top: 70px;
                width: 64px;
                height: 64px;
            }

            .drf_sb {
                background-image: url(../images/drf_title15.webp);
                background-position: 0 bottom;
                width: 64px;
                height: 64px;
            }
        }
    }
}